<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      {{ "Scan_your_QR_Code" | translation: language }}
    </ion-title>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="backg">

    <div class="ion-padding-horizontal ion-text-center">
      <ion-card class="CardContainer">

        <ion-card-header class="step">
            {{ "SCAN" | translation: language }}
        </ion-card-header>
      
        <ion-card-content class="ion-text-left">
          <p class="step">1.  {{ "Scan_the_QR_code_to_request_a_dish_at_any_of_the_affiliated_restaurants" | translation: language }}</p>
          
          <p class="step">2.  {{ "Order_what_you_want" | translation: language }}</p>
          
          <p class="step">3. {{ "Display_the_status_of_your_order" | translation: language }}</p>
        </ion-card-content>
        
      </ion-card>

    </div>

    <ion-icon class="arrow animated fadeInDown" name="arrow-down-outline"></ion-icon>

    <div class="scan-qr-wrapper">
      <div class="scanBtn" (click)="scan()">
        <p class="textScan">SCAN</p>
      </div>
      
      <div class="qr" (click)="scan()"></div>
    </div>

  </div>
</ion-content>
<div class="yellow__div"></div>
